$('.card-body .btn').on('click',function(e){
    // 保存 type 信息
    var type = $(this).attr('name')

    // 更改样式
    $('.card-body .btn').each(function(){
        $(this).removeClass('btn-info').addClass('btn-outline-info')
    })
    $(this).addClass('btn-info').removeClass('btn-outline-info')

    // 清空
    $('.notes').html("")

    var html = `<div class="card mt-4">
    <div class="card-body">
        <h4 class="card-title"><a href="/show?id={{id}}">{{title}}</a></h4>
        <div class="card-text mb-2">{{description}}</div>
        <div class="btn-box">
            <small class="card-subtitle text-muted mb-2 mr-2">
            <i class="bi bi-person"></i>
                {{username}}
            </small>
            <small class="card-subtitle text-muted mb-2 mr-2">
            <i class="bi bi-calendar-week-fill"></i>
                {{time}}
            </small>
            <small class="card-subtitle text-muted mb-2 mr-2"><i class="bi bi-tags"></i>{{type}}</small>
        </div>
    </div>
</div>`

    // 发送 ajax 请求
    $.ajax({
        async:true,
        url:'/getType',
        data:{type:type},
        success: function(ret){
            if(ret.success === false){
                return alert('false')
            }
            $(ret.data).each(function(index){
                $that = $(this)[0]
                target = html
                target = target.replace('{{id}}', $that._id)
                .replace('{{title}}', $that.title)
                .replaceAll('{{time}}', new Date($that.createTime).toLocaleString().split(' ')[0])
                .replace('{{description}}', $that.description)
                .replace('{{username}}', $that.userId.username)
                .replace('{{type}}', $that.type)
                $('.notes').append(target)
            })
        },
        error:function(err){
            alert(err.message)
        }
    })
})